    <!DOCTYPE html>
    <html lang="en">
        <head>
            <meta charset="UTF-8">
            <title>Title</title>
            <style>
                .content{
                    width: 600px;
                    height: 350px;
                    border: 1px solid grey;
                    margin: 30px auto;
                }
                .left{
                    width: 200px;
                    height: 200px;
                    float: left;
                    border-right: 1px solid papayawhip;
                    margin: 50px 0 ;
                }
                .mian{
                    width: 200px;
                    height: 300px;
                    float: left;
                }
                .rs{
                    width: 50px;
                    height: 50px;
                    line-height: 50px;
                    background-color:gainsboro;
                    margin: 65px auto;
                    padding: 0 30px;
                }
                .ls{
                    width: 50px;
                    height: 50px;
                    line-height: 50px;
                    background-color:gainsboro;
                    margin: 40px auto;
                    padding: 0 30px;
                }
                .right{
                    float: right;
                    width: 190px;
                    height: 200px;
                    border-left: 1px solid grey;
                    margin: 50px 0 ;
                }
            </style>
            <script>
                //定义通过ID获取页面元素的方法
                var $ = function (a) {
                    return document.getElementById(a)
                };

                //定义通过Class获取页面的方法
                var $left = function (z) {
                    return document.getElementsByClassName(z)
                };

                //定义打开窗口的方法：
                var win = function () {
                  //构建一个div(背景层)
                    var _back = document.createElement('div');
                    _back.style.position = 'absolute';
                    _back.style.left = 0;
                    _back.style.top = 0;
                    _back.style.opacity = 0.8;
                    _back.style.backgroundColor ='gainsboro';
                    _back.style.width = document.documentElement.clientWidth + 'px' ;
                    _back.style.height = document.documentElement.clientHeight + 'px' ;

                    //放在文档body里
                    document.body.appendChild(_back);
                };

                //var wins = function () {
                    //构建一个div（前景层）
                    //var _fore = document.createElement('div');
                    //_fore.style.position = 'absolute';
                    //_fore.style.top = ((document.documentElement.clientHeight - 120)/ 2 ) + 'px';
                    //_fore.style.left = ((document.documentElement.clientWidth - 300)/ 2 ) + 'px' ;
                    //_fore.style.width = '300px';
                    //_fore.style.height = '120px';
                   // _fore.style.border = '1px solid lightgray';
                   // _fore.style.backgroundColor = 'grey';

                //创建一个文字
                var nname = document.createElement('div');
                nname.textContent = "请输入你需要添加的好友名称：";
                _fore.appendChild(nname);

                //创建一个输入框
                //var inp = document.createElement('input');
                //inp.style.marginLeft = '60px';
                //inp.style.marginTop = '20px';
                //_fore.appendChild(inp);

                //创建一个保存的按键
                ///var bta = document.createElement('button');
                //bta.textContent = "保存";
                //bta.style.marginTop = '20px';
               // bta.style.marginLeft = '90px';
                //bta.style.marginRight = '20px';
                //_fore.appendChild(bta);

                //创建一个取消的按键
                var btb = document.createElement('button');
                btb.textContent = "取消";
                btb.style.marginTop = '20px';
                _fore.appendChild(btb);



                    //放在文档body里
                    document.body.appendChild(_fore);

                };


                //用来保存选中的div
                var  selected;

                //定义好友名单
                var fridens = ['张三','李四','王五','机房','导航'];

                //添加数据的方法
                var add = function (name) {
                    //添加div
                    var div = document.createElement('div');
                    div.textContent = name;
                    div.className = 'liv';

                    //添加div里的删除功能
                    var x = document.createElement('span');
                    x.style.float = 'right';
                    x.style.marginRight = '5px';
                    x.style.cursor = 'pointer';
                    x.textContent = 'X';
                    x.title = '删除';
                    x.onclick = function () {
                        if (confirm('你是否要删除?')) {
                            $('leftt').removeChild(this.parentNode);
                        }
                    };
                    div.appendChild(x);

                    //添加div的点击事件
                    div.onclick = function () {
                        //清除之前已经选中的div选中的样式
                        if (null != selected){
                            selected.style.backgroundColor = "";
                        }

                        //标识选中div的背景样式
                        this.style.backgroundColor = "gainsboro";

                        //保存选中的对象
                        selected = this;
                    };
                    return div;
                };

                //当页面加载完成的时候
                window.onload = function () {
                    //初始化数据 把已有的好友名单显示出来
                    for (var i = 0; i< fridens.length;i++){
                        //构建一个div的好友数据
                        var dd = add(fridens[i]);
                        //添加左边div容器
                        $('leftt').appendChild(dd);
                    }

                    //右按钮
                    $('rss').onclick = function () {
                        if (null == selected){
                            alert('还没有选择!');
                        }else {
                            $('righttp').appendChild(selected);
                            selected.style.backgroundColor = '';
                            selected = null;
                        }
                    };

                    //左按钮
                    $('lss').onclick = function () {
                        if (null == selected){
                            alert('还没有选择!');
                        }else {
                            $('leftt').appendChild(selected);
                            selected.style.backgroundColor = '';
                            selected = null;
                        }
                    };

                    //新增好友
                    $('btnAdd').onclick = function () {
                        var fname = $('t1').value;
                        var div = add(fname);
                        $('leftt').appendChild(div);

                        //win();
                        //wins();
                    };
                };


                //alert(document.documentElement.clientWidth);
                //alert(document.documentElement.clientHeight);

                
            </script>
        </head>
        <body>
            <div class="content">
                <div style="width: 600px;height: 20px;margin: 30px 0 0 0;">
                <button id="btnAdd">新增好友</button>
                请输入好友名称：<input id="t1" type="text"/>
            </div>
                <div class="left" id = 'leftt'></div>
                <div class="mian">
                    <div class="rs" id="rss">右移</div>
                    <div class="ls" id="lss">左移</div>
                </div>
                <div class="right" id="righttp"></div>

            </div>
        </body>
    </html>